<!--
 * @Description: 添加组件，蒙层对话框
 * @Author: youzi
 * @Date: 2020-05-20 14:11:14
 * @LastEditors: youzi
 * @LastEditTime: 2020-09-15 10:44:34
-->
<template>
  <a-modal
    centered
    title="详情"
    closable
    v-model="realVisible"
    :footer="null"
    @cancel="onClose"
    :maskClosable="false"
    :bodyStyle="bodyStyle"
    :width="600"
  >
    <a-form :form="form">
      <a-form-item v-bind="formItemLayout" label="售后状态">
        <span>{{ orderStatusMap[initRecord.orderStatus] }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="售后单号">
        <span>{{ initRecord.orderNo }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="原订单号">
        <span>{{ initRecord.orderNofrom }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="会员昵称">
        <span>{{ initRecord.username }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="电话">
        <span>{{ initRecord.mobile }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="订单商品">
        <div v-for="(goods, goodsIndex) in initRecord.orderGoodsList" :key="goodsIndex">{{goods.goodsNo}}-{{goods.goodsName}}{{goods.goodsAttr ? goods.goodsAttr : ''}}-x{{goods.totalNum}}</div>
      </a-form-item>
<!--      <a-form-item v-bind="formItemLayout" label="商品金额(元)">-->
<!--        <span>{{ initRecord.totalPrice }}</span>-->
<!--      </a-form-item>-->
<!--      <a-form-item v-bind="formItemLayout" label="运费(元)">-->
<!--        <span>{{ initRecord.expressPrice }}</span>-->
<!--      </a-form-item>-->
      <a-form-item v-bind="formItemLayout" label="退款金额(元)">
        <span>{{ initRecord.payPrice }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="创建时间">
        <span>{{ initRecord.createTime }}</span>
      </a-form-item>
<!--      <a-form-item v-bind="formItemLayout" label="支付时间" v-if="initRecord.payTime && initRecord.payTime.length > 0">-->
<!--        <span>{{ initRecord.payTime }}</span>-->
<!--      </a-form-item>-->
<!--      <a-form-item v-bind="formItemLayout" label="发货时间">-->
<!--        <span>{{ initRecord.orderNo }}</span>-->
<!--      </a-form-item>-->
<!--      <a-form-item v-bind="formItemLayout" label="收货时间">-->
<!--        <span>{{ initRecord.orderNo }}</span>-->
<!--      </a-form-item>-->
<!--      <a-form-item v-bind="formItemLayout" label="物流公司" v-if="initRecord.expressCompany && initRecord.expressCompany.length > 0">-->
<!--        <span>{{ initRecord.expressCompanyName }}</span>-->
<!--      </a-form-item>-->
<!--      <a-form-item v-bind="formItemLayout" label="物流单号" v-if="initRecord.expressNo && initRecord.expressNo.length > 0">-->
<!--        <span>{{ initRecord.expressNo }}</span>-->
<!--      </a-form-item>-->
<!--      <a-form-item v-bind="formItemLayout" label="收货人">-->
<!--        <span>{{ initRecord.orderAddress && initRecord.orderAddress.name ? initRecord.orderAddress.name : '' }}</span>-->
<!--      </a-form-item>-->
<!--      <a-form-item v-bind="formItemLayout" label="收货人电话">-->
<!--        <span>{{ initRecord.orderAddress && initRecord.orderAddress.phone ? initRecord.orderAddress.phone : '' }}</span>-->
<!--      </a-form-item>-->
<!--      <a-form-item v-bind="formItemLayout" label="收获地址">-->
<!--        <span v-if="initRecord.orderAddress">{{ initRecord.orderAddress.province }}{{ initRecord.orderAddress.city }}{{ initRecord.orderAddress.region }}{{ initRecord.orderAddress.detail }}</span>-->
<!--        <span v-else></span>-->
<!--      </a-form-item>-->
      <a-form-item v-bind="formItemLayout" label="退款方式">
        <span>{{ initRecord.orderType == 1 ? '仅退款(无需退货)' : '退货退款' }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="退款原因">
        <span>{{ initRecord.returnReason }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="退款描述" v-if="initRecord.remark && initRecord.remark.length > 0">
        <span>{{ initRecord.remark }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="退款凭证" v-if="initRecord.images && initRecord.images.length > 0">
        <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start">
          <a :href="imgUrl" target="_blank" v-for="(imgUrl, imgIndex) in initRecord.images" :key="imgIndex">
            <img class="code-img" :src="imgUrl" alt="" />
          </a>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 }
};
export default {
  name: 'info',
  props: {
    // status:  [],
    visible: {
      default: false
    },
    initRecord: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // formItem,
      formItemLayout,
      form: this.$form.createForm(this),
      // 0-已取消 1-待商家审核 2-待买家退货 3-待收货(待退款) 4-商家已退款(待退款) 5-商家驳回 6-已完成(退款5天后默认已完成)
      orderStatusMap: Object.freeze({
        '0': '已取消',
        '1': '待审核',
        '2': '待买家退货',
        '3': '待收货',
        '4': '待系统退款',
        '5': '被驳回',
        '6': '已完成'
      }),
    };
  },
  mounted() {},
  computed: {
    bodyStyle() {
      return {
        maxHeight: window.innerHeight * 0.8 + 'px',
        overflowY: 'scroll',
        padding: 0
      };
    },
    realVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        return val;
      }
    }
  },
  methods: {
    onClose() {
      this.$emit('close');
    }
  },
  watch: {}
};
</script>
<style scoped>
.code-img {
  width: 100px;
  height: 100px;
  margin-right: 5px;
}
</style>
